import React from 'react';
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import { TContainerProps } from './Types';
import { V } from './containers';
import { Inter } from './Texts';

export interface TButtonProps extends TContainerProps {
  /**
   * 按钮文本
   */
  title: string;
  /**
   * 按钮类型
   */
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
  /**
   * 按钮大小
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 是否加载中
   */
  loading?: boolean;
  /**
   * 加载文本
   */
  loadingText?: string;
  /**
   * 图标名称
   */
  icon?: string;
  /**
   * 图标位置
   */
  iconPosition?: 'left' | 'right';
  /**
   * 点击事件
   */
  onPress?: () => void;
}

export function Button({
  title,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  loadingText,
  icon,
  iconPosition = 'left',
  onPress,
  ...props
}: TButtonProps) {
  const buttonStyle = getButtonStyle(variant, size, disabled);
  const textStyle = getTextStyle(variant, size, disabled);

  const renderContent = () => {
    const content = loading ? loadingText || title : title;

    if (icon && !loading) {
      const IconComponent = require('@expo/vector-icons').Ionicons;
      const iconElement = (
        <IconComponent
          name={icon as any}
          size={size === 'small' ? 16 : size === 'large' ? 24 : 20}
          color={textStyle.color}
          style={{
            marginRight: iconPosition === 'left' ? 8 : 0,
            marginLeft: iconPosition === 'right' ? 8 : 0,
          }}
        />
      );

      return (
        <V row ai="c">
          {iconPosition === 'left' && iconElement}
          <Inter style={textStyle}>{content}</Inter>
          {iconPosition === 'right' && iconElement}
        </V>
      );
    }

    return <Inter style={textStyle}>{content}</Inter>;
  };

  return (
    <TouchableOpacity
      style={[buttonStyle, (props as any).style]}
      onPress={disabled || loading ? undefined : onPress}
      disabled={disabled || loading}
      {...props}
    >
      <V row ai="c" jc="c">
        {renderContent()}
        {loading && (
          <ActivityIndicator
            size="small"
            color={textStyle.color}
            style={{ marginRight: 8, marginLeft: 8 }}
          />
        )}
      </V>
    </TouchableOpacity>
  );
}

function getButtonStyle(variant: string, size: string, disabled: boolean) {
  const baseStyle = {
    borderRadius: size === 'small' ? 6 : size === 'large' ? 12 : 8,
    paddingHorizontal: size === 'small' ? 12 : size === 'large' ? 24 : 16,
    paddingVertical: size === 'small' ? 8 : size === 'large' ? 16 : 12,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
    flexDirection: 'row' as const,
  };

  const variantStyles = {
    primary: {
      backgroundColor: disabled ? '#cbd5e1' : '#0ea5e9',
    },
    secondary: {
      backgroundColor: disabled ? '#e2e8f0' : '#64748b',
    },
    outline: {
      backgroundColor: 'transparent',
      borderWidth: 1,
      borderColor: disabled ? '#cbd5e1' : '#0ea5e9',
    },
    ghost: {
      backgroundColor: 'transparent',
    },
    danger: {
      backgroundColor: disabled ? '#fecaca' : '#ef4444',
    },
  };

  return {
    ...baseStyle,
    ...variantStyles[variant as keyof typeof variantStyles],
  };
}

function getTextStyle(variant: string, size: string, disabled: boolean) {
  const baseStyle = {
    fontSize: size === 'small' ? 14 : size === 'large' ? 18 : 16,
    fontWeight: '600' as const,
  };

  const variantStyles = {
    primary: {
      color: '#ffffff',
    },
    secondary: {
      color: '#ffffff',
    },
    outline: {
      color: disabled ? '#94a3b8' : '#0ea5e9',
    },
    ghost: {
      color: disabled ? '#94a3b8' : '#0ea5e9',
    },
    danger: {
      color: '#ffffff',
    },
  };

  return {
    ...baseStyle,
    ...variantStyles[variant as keyof typeof variantStyles],
  };
}
